<template>
	<view class="client-pages" :class="themeName">

		<view class="client-list p-20">
			<u-form :model="formModel" ref="uForm" :error-type="['toast']">
				<u-form-item label-position="top" :label="$zhTran('工单类型')" required prop="type_desc">
					<u-input v-model="formModel.type_desc" type="select" @click="selectChoose(typeList,'type')"
						:placeholder="$zhTran('请选择工单类型')" />
				</u-form-item>
				<u-form-item label-position="top" :label="$zhTran('工单备注')" prop="remark">
					<u-input v-model="formModel.remark" :placeholder="$zhTran('请填写工单备注')" type="textarea" />
				</u-form-item>
			</u-form>

			<u-gap height="150"></u-gap>
		</view>
		<view class="functions flex row-between">
			<button class="apply-btn" @click="saveRetail">{{$zhTran('提交订单')}}</button>
		</view>

		<u-select v-model="selectShow" :confirm-color="themeColor" cancel-color="#999" @confirm="valueChange($event)"
			:list="value_select" :default-value="value_default"></u-select>
	</view>
</template>

<script>
	import {
		apiAddServiceWorkOrderApply,
		apiServiceWorkOrderConfig,
	} from "@/api/service_work_order"
	export default {
		data() {
			return {
				typeList: [],
				formModel: {
					type: '',
					type_desc: '',
					order_goods: '',
					remark: '',
				},
				rules: {
					type_desc: [{
						required: true,
						message: this.$zhTran('请选择工单类型'),
						trigger: ['change', 'blur'],
					}],
				},
				value_select: [],
				value_default: [],
				value_idx: '',
				selectShow: false,
			};
		},
		onLoad() {
			const options = this.$Route.query
			this.formModel.order_goods = parseInt(options?.order_goods)
			uni.setNavigationBarTitle({
				title: this.$zhTran('申请工单')
			});

			this.getConfig()

			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			selectChoose(data, idx) {
				this.value_default = []
				var defidx = data.findIndex(item => item.value == this.formModel.type)
				if (defidx < 0)
					defidx = 0
				this.value_default.push(defidx)

				this.value_idx = idx
				this.value_select = data
				this.selectShow = true
			},
			valueChange(e) {
				this.formModel.type = e[0].value
				this.formModel.type_desc = e[0].label
			},
			getConfig() {
				apiServiceWorkOrderConfig().then((nres) => {
					let res = this.$zhTran(nres)
					this.typeList = res.type_list
				})
			},
			saveRetail() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						apiAddServiceWorkOrderApply({
							...this.formModel,
						}).then((res) => {
							this.$toast({
								title: this.$zhTran('申请成功'),
								endtime: 1200
							}, {
								tab: 5,
								url: '/bundle3/pages/service_work_order/user/list'
							});
						}).catch(err => {
							return this.$toast({
								title: this.$zhTran(err)
							});
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	.client-list {

		.other-btn {
			font-size: 28rpx;
		}

		.u-form-item {
			position: relative;

			.choose-tab {
				color: rgba(250, 64, 52, 1);
				border-radius: 10rpx;
				width: 260rpx;
				position: absolute;
				top: 6rpx;
				right: 0;
			}

		}
	}

	.u-form-item {
		padding: 20rpx 30rpx !important;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;

		&--left {
			border-bottom: 1rpx solid rgba(247, 247, 247, 1) !important;
		}
	}

	.functions {
		position: fixed;
		z-index: 9999;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 30rpx constant(safe-area-inset-bottom) 30rpx;
		padding: 0 30rpx env(safe-area-inset-bottom) 30rpx;

		.apply-btn {
			font-size: 28rpx;
			width: 100%;
			background-color: rgba(64, 115, 250, 1);
			color: #fff;
		}
	}
</style>